<!--  -->
<template lang='html'>
  <div class="home">
      <div class="home-left">
          <div class="l-top">
              <img src="">
              <span>易书后台管理系统</span>
          </div>
          <router-link  :to="item.path" v-for="(item,index) in lists.date" :key="index" class="router-link" active-class="black">
              <p>{{item.name}}</p>
          </router-link>
         
      </div>
      <div class="home-right">
         <div class="h-top"></div>
           <div>
                <router-view />
            </div>

          </div>   
      </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      lists: {
        date: [
          {
            name: "易书首页",
            path: "/student",
          },{
            name: "用户管理",
            path: "/user",
          },
          {
            name: "图书管理",
            path: "/books",
          },
          {
            name: "活动管理",
            path: "/hot",
          },
          {
            name: "权限管理",
            path: "/permis",
          }, {
            name: "员工管理",
            path: "/worker",
          },{
            name: "日志管理",
            path: "/daylog",
          },
        ],
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>
<style lang='css' scoped>
.home {
  display: flex;
}
.home-left {
  width: 14%;
  position: fixed;
  /* background: blue; */
  left: 0;
  top: 0;
  right: 14%;
  bottom: 0;
}
.l-top {
  width: 100%;
  height: 80px;
  /* background: #000; */
  text-align: center;
  line-height: 80px;
}
.l-top span {
  color: #5693ff;
  font-weight: 600;
  font-size: 20px;
}
.l-list {
  width: 100%;
  height: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}

.home-right {
  width: 94%;
  position: fixed;
  background: #f0f2f6;
  left: 14%;
  top: 0;
  right: 14%;
  bottom: 0;
}
.h-top {
  width: 100%;
  height: 80px;
  background: #fff;
}
.h-center {
  margin-top: 20px;
  margin-left: 20px;
}
.h-bottom {
  width: 100%;
  height: 700px;
  margin-top: 30px;
  margin-left: 20px;
  /* background-color: #fff; */
  border-radius: 6px;
}
.h-hot {
  display: flex;
}
.center-left {
  width: 50%;
  margin-right: 10px;
  height: 400px;
  background: #fff;
  border-radius: 6px;
  padding: 20px;
}
.center-left p {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
}
.center-right {
  margin-left: 10px;
  width: 50%;
  height: 400px;
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}
.center-right p {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
}
.option {
  background: #fff;
  border-radius: 6px;
}
.h-footer {
  margin-top: 20px;
  width: 100%;
  height: 240px;
  background: #fff;
  border-radius: 6px;
  padding: 20px;
}
.router-link{
  background: rgba(21, 160, 255, 0.3);
  text-align: center;
  font-size: 20px;
}
.router-link p {
  width: 100%;
  height: 50px;
}
.c-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.c-list p {
  margin-left: 80px;
  margin-top: 100px;
  width: 120px;
}
.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(21, 160, 255, 0.3);
}
.black{
  background: rgba(86, 147, 255, 0.3) !important;
  color: rgb(86, 147, 255) !important;
  font-weight: 500;
}

</style>